<template>
    <div style="margin: 10px 0;">
        <el-select v-model="searchStatus" placeholder="请选择审核情况">
            <el-option label="所有" value="" @click="checkAchievement()"></el-option>
            <el-option label="审核中" value="审核中" @click="checkAchievement()"></el-option>
            <el-option label="审核通过" value="审核通过" @click="checkAchievement()"></el-option>
            <el-option label="审核失效" value="审核失效" @click="checkAchievement()"></el-option>
            <el-option label="未提交" value="未提交" @click="checkAchievement()"></el-option>
        </el-select>
        <el-input v-model="searchContractName" placeholder="按合同名称搜索" style=" width: 20%;" clearable></el-input>
        <el-input v-model="searchAchievementName" placeholder="按成果名称搜索" style=" width: 20%;" clearable></el-input>
        <el-button style="margin-left:5px ;" @click="checkAchievement()">
            <el-icon>
                <search />
            </el-icon><span style="margin-left: 5px;">查询</span>
        </el-button>
        <el-button type="primary" style="margin-left:30px ;" @click="checkAdd()">
            <el-icon>
                <document-add />
            </el-icon><span style="margin-left: 5px;">添加</span>
        </el-button>
        <el-button type="primary" @click="dialogExcel = true">导入成功转化信息</el-button>
        <el-table :data="tableData" stripe style="width: 100%;margin-top: 10px;">
            <el-table-column prop="id" label="ID" sortable />
            <el-table-column prop="contractName" label="合同名称" />
            <el-table-column prop="achievementName" label="成果名称" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-tag vclass="ml-2" v-if="scope.row.status == '审核通过'">{{scope.row.status}}</el-tag>
                    <el-tag vclass="ml-2" type="warning" v-else-if="scope.row.status == '审核中'">{{scope.row.status}}
                    </el-tag>
                    <el-tag vclass="ml-2" type="info" v-else-if="scope.row.status == '未提交'">{{scope.row.status}}
                    </el-tag>
                    <el-tag vclass="ml-2" type="danger" v-else>{{scope.row.status}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="inputPeople" label="录入人" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="checkUp(scope.row)">信息详情</el-button>
                    <el-button type="text" @click="dealFile(scope.row)">附件详情</el-button>
                    <el-popconfirm title="确定提交审核吗？" v-if="scope.row.status == '未提交'||scope.row.status == '审核失效'" @confirm="dealStatus(scope.row,'审核中')">
                         <template #reference>
                             <el-button type="text" >提交审核</el-button>
                         </template>
                     </el-popconfirm>
                     <el-popconfirm title="确定退回修改吗？" v-if="scope.row.status == '审核中'" @confirm="dealStatus(scope.row,'未提交')">
                          <template #reference>
                              <el-button type="text" >退回修改</el-button>
                          </template>
                      </el-popconfirm>
                    <el-popconfirm title="这些内容确定删除吗？" v-if="scope.row.status == '未提交'||scope.row.status == '审核失效'"
                        @confirm="deleteFile(scope.row)">
                        <template #reference>
                            <el-button type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="demo-pagination-block">
            <div style="float: right;">
                <el-pagination :currentPage="current" :page-sizes="[10,20,30]" :page-size=page
                    layout="sizes, prev, pager, next,total,jumper" :total=firstTotal @size-change="handleSize"
                    @current-change="handleCurrent">
                </el-pagination>
            </div>
        </div>

        <el-dialog v-model="dialogAddAchievement" title="录入成功转化信息" width="50%" center>
            <el-form ref="achievement" :model="achievement" :rules="rules" label-width="200px" class="demo-ruleForm"
                :size="formSize">


                <el-form-item label="合同名称" prop="contractName">
                    <el-input v-model="achievement.contractName" placeholder="请输入合同名称"></el-input>
                </el-form-item>

                <el-form-item label="对应成果名称" prop="achievementName">
                    <el-input v-model="achievement.achievementName" placeholder="对应成果名称"></el-input>
                </el-form-item>


                <el-form-item label="转化方式" prop="transformationMode">
                    <el-select v-model="achievement.transformationMode" placeholder="科技成果转化方式">
                        <el-option label="转让" value="国家级"></el-option>
                        <el-option label="许可" value="国家部委级"></el-option>
                        <el-option label="作价投资" value="省级"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="合同签订时间" required>
                    <el-col :span="11">
                        <el-form-item prop="contractDate">
                            <el-date-picker v-model="achievement.contractDate" type="date" placeholder="选择日期"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item label="定价方式" prop="pricingMethod">
                    <el-select v-model="achievement.pricingMethod" placeholder="科技成果定价方式">
                        <el-option label="协议定价" value="协议定价"></el-option>
                        <el-option label="挂牌定价" value="挂牌定价"></el-option>
                        <el-option label="拍卖" value="拍卖"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="是否经过评估">
                    <el-switch size="large" v-model="achievement.evaluated" inline-prompt active-text="是"
                        inactive-text="否">
                    </el-switch>
                </el-form-item>


                <el-form-item label="转化去向" prop="transformationDestination">
                    <el-select v-model="achievement.transformationDestination" placeholder="科技成果转化去向">
                        <el-option label="境内(中小微企业、国有企业)" value="境内(中小微企业、国有企业)"></el-option>
                        <el-option label="境内(中小微企业、其他企业)" value="境内(中小微企业、其他企业)"></el-option>
                        <el-option label="境内(大型企业、国有企业)" value="境内(大型企业、国有企业)"></el-option>
                        <el-option label="境内(大型企业、其他企业)" value="境内(大型企业、其他企业)"></el-option>
                        <el-option label="境内(非企业单位)" value="境内(非企业单位)"></el-option>
                        <el-option label="境外" value="境外"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="转化至单位名称（选填）">
                    <el-input v-model="achievement.companyName" placeholder="请输入转化至单位名称（选填）"></el-input>
                </el-form-item>


                <el-form-item label="转化至所在地">
                    <el-input v-model="achievement.convertLocation" placeholder="请输入转化至所在地"></el-input>
                </el-form-item>

                <el-form-item label="成果应用行业领域" prop="applicationIndustry">
                    <el-select v-model="achievement.applicationIndustry" placeholder="国民经济行业门类">
                        <el-option label="农、林、牧、渔业(A)" value="农、林、牧、渔业(A)"></el-option>
                        <el-option label="采矿业(B)" value="采矿业(B)"></el-option>
                        <el-option label="制造业(C)" value="制造业(C)"></el-option>
                        <el-option label="电力、热力、燃气及水生产和供应业(D)" value="电力、热力、燃气及水生产和供应业(D)"></el-option>
                        <el-option label="建筑业(E)" value="建筑业(E)"></el-option>
                        <el-option label="批发和零售业(F)" value="批发和零售业(F)"></el-option>
                        <el-option label="交通运输、仓储和邮政业(G)" value="交通运输、仓储和邮政业(G)"></el-option>
                        <el-option label="住宿和餐饮业(H)" value="住宿和餐饮业(H)"></el-option>
                        <el-option label="信息传输、软件和信息技术服务业(I)" value="信息传输、软件和信息技术服务业(I)"></el-option>
                        <el-option label="金融业(J)" value="金融业(J)"></el-option>
                        <el-option label="房地产业(K)" value="房地产业(K)"></el-option>
                        <el-option label="租赁和商务服务业(L)" value="租赁和商务服务业(L)"></el-option>
                        <el-option label="科学研究和技术服务业(M)" value="科学研究和技术服务业(M)"></el-option>
                        <el-option label="水利、环境和公共设施管理业(N)" value="水利、环境和公共设施管理业(N)"></el-option>
                        <el-option label="居民服务、修理和其他服务业(O)" value="居民服务、修理和其他服务业(O)"></el-option>
                        <el-option label="教育(P)" value="教育(P)"></el-option>
                        <el-option label="卫生和社会工作(Q)" value="卫生和社会工作(Q)"></el-option>
                        <el-option label="文化、体育和娱乐业(R)" value="文化、体育和娱乐业(R)"></el-option>
                        <el-option label="公共管理、社会保障和社会组织(S)" value="公共管理、社会保障和社会组织(S)"></el-option>
                        <el-option label="国际组织(T)" value="国际组织(T)"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="受中央财政资助类型">
                    <el-checkbox-group v-model="governmentType">
                        <el-checkbox label="国家自然科学基金" name="governmentType"></el-checkbox>
                        <el-checkbox label="国家科技重大专项" name="governmentType"></el-checkbox>
                        <el-checkbox label="国家重点研发计划" name="governmentType"></el-checkbox>
                        <el-checkbox label="技术创新引导专项（基金）" name="governmentType"></el-checkbox>
                        <el-checkbox label="基地和人才专项" name="governmentType"></el-checkbox>
                        <el-checkbox label="其他" name="governmentType"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="合同状态" prop="contractStatus">
                    <el-radio-group v-model="achievement.contractStatus">
                        <el-radio label="进行"></el-radio>
                        <el-radio label="完成"></el-radio>
                        <el-radio label="终止"></el-radio>
                        <el-radio label="撤销"></el-radio>
                        <el-radio label="已提交材料，结题中"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="合同金额（万）">
                    <el-input-number :min="0" controls-position="right" v-model.number="achievement.contractAmount"
                        style="width: 100px"></el-input-number>
                </el-form-item>

                <el-form-item label="年度到账经费">
                    <el-table :data="annualReceived" max-height="250" style="width: 100%">
                        <el-table-column label="年份">
                            <template #default="scope">
                                <el-input-number :min="0" controls-position="right" v-model.number="scope.row.year"
                                    style="width: 100px"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="到账经费（万元）">
                            <template #default="scope">
                                <el-input-number :min="0" controls-position="right"
                                    v-model.number="scope.row.fundsReceived" style="width: 100px"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button style="color: red;" type="text" @click="deleteItem(scope.$index)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button class="mt-4" style="width: 100%" @click="onAddItem">增加一行</el-button>
                </el-form-item>

                <el-form-item label="录入人">
                    {{achievement.inputPeople}}
                </el-form-item>

                <el-form-item label="立项文件">
                    <el-upload ref="upload" class="upload-demo" drag action="#" :http-request="uploadFile">
                        <el-icon class="el-icon--upload">
                            <upload-filled />
                        </el-icon>
                        <div class="el-upload__text">
                            拖放文件 <em>上传文件</em>
                        </div>
                    </el-upload>
                </el-form-item>


                <el-form-item label="参与人员">
                    <div>
                        <el-button size="small" type="primary" @click="addAccount()">选择本单位人员</el-button>
                        <el-button size="small" @click="addStudent()">增加学生或外单位人员</el-button>
                        <el-button size="small" type="primary" @click="addOneSelf()">增加本人</el-button>
                    </div>
                    <div style="margin-top: 10px;">
                        <el-table :data="achievement.participants" max-height="250" style="width: 100%">
                            <el-table-column label="排序">
                                <template #default="scope">
                                    <el-input-number :min="1" controls-position="right"
                                        v-model.number="scope.row.sortNumber" style="width: 100px"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名">
                                <template #default="scope">
                                    <span style="color:#67b6ff" v-if="scope.row.usersId!=null"
                                        type="text">{{scope.row.participantName}}</span>
                                    <el-input v-model="scope.row.participantName" placeholder="请输入姓名" v-else></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="工作单位">
                                <template #default="scope">
                                    <el-input v-model="scope.row.workPlace" v-if="scope.row.usersId!=null" disabled>
                                    </el-input>
                                    <el-input v-model="scope.row.workPlace" v-else></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="类别">
                                <template #default="scope">
                                    <span style="color:#67b6ff" v-if="scope.row.usersId!=null"
                                        type="text">{{scope.row.category}}</span>
                                    <el-select v-model="scope.row.category" placeholder="类别" v-else>
                                        <el-option label="老师" value="老师"></el-option>
                                        <el-option label="学生" value="学生"></el-option>
                                        <el-option label="外单位" value="外单位"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button style="color: red;" type="text" @click="deleteOne(scope.$index)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button size="large" type="primary" @click="submitAddAchievement('achievement')">保存成果转化
                    </el-button>
                </el-form-item>

            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogAddAccount" title="录入成果转化信息" width="30%" center>
            <el-select v-model="searchRoles" style=" width: 20%;" placeholder="请选择角色类别">
                <el-option label="所有" value="" @click="checkRoles()"></el-option>
                <el-option label="管理员" value="管理员" @click="checkRoles()"></el-option>
                <el-option label="老师" value="老师" @click="checkRoles()"></el-option>
                <el-option label="研究生" value="研究生" @click="checkRoles()"></el-option>
            </el-select>
            <el-input v-model="searchName" placeholder="按名搜索" style=" width: 20%;" clearable></el-input>
            <el-button style="margin-left:5px ;" @click="checkRoles()">
                <el-icon>
                    <search />
                </el-icon><span style="margin-left: 5px;">查询</span>
            </el-button>
            <el-button style="margin-left:5px ;" type="primary" @click="addListparticipants()">
                <span>添加</span>
            </el-button>
            <div style="margin-top: 10px;">
                <el-table ref="multipleTableRef" :data="AccountTableData" @selection-change="handleSelectionChange"
                    @row-click="textRowClick" stripe style="width: 100%">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="participantName" label="姓名" />
                    <el-table-column prop="workPlace" label="工作单位" />
                    <el-table-column prop="category" label="类别" />
                </el-table>
            </div>
            <div class="demo-pagination-block">
                <div style="float: right;">
                    <el-pagination :currentPage="currentPage" :page-size=pageSize
                        layout="prev, pager, next,total,jumper" :total=total @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

            <!-- 多留空间好看 -->
            <div style="margin-top: 10px;"></div>
        </el-dialog>

        <el-dialog v-model="dialogUpAchievement" title="成功转化信息详情" width="50%" center>
            <el-form ref="achievement" :model="achievement" :rules="rules" label-width="200px" class="demo-ruleForm"
                :size="formSize">


                <el-form-item label="合同名称" prop="contractName">
                    <el-input v-model="achievement.contractName" placeholder="请输入合同名称"></el-input>
                </el-form-item>

                <el-form-item label="对应成果名称" prop="achievementName">
                    <el-input v-model="achievement.achievementName" placeholder="对应成果名称"></el-input>
                </el-form-item>


                <el-form-item label="转化方式" prop="transformationMode">
                    <el-select v-model="achievement.transformationMode" placeholder="科技成果转化方式">
                        <el-option label="转让" value="国家级"></el-option>
                        <el-option label="许可" value="国家部委级"></el-option>
                        <el-option label="作价投资" value="省级"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="合同签订时间" required>
                    <el-col :span="11">
                        <el-form-item prop="contractDate">
                            <el-date-picker v-model="achievement.contractDate" type="date" placeholder="选择日期"
                                style="width: 100%"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item label="定价方式" prop="pricingMethod">
                    <el-select v-model="achievement.pricingMethod" placeholder="科技成果定价方式">
                        <el-option label="协议定价" value="协议定价"></el-option>
                        <el-option label="挂牌定价" value="挂牌定价"></el-option>
                        <el-option label="拍卖" value="拍卖"></el-option>
                        <el-option label="其他" value="其他"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="是否经过评估">
                    <el-switch size="large" v-model="achievement.evaluated" inline-prompt active-text="是"
                        inactive-text="否">
                    </el-switch>
                </el-form-item>


                <el-form-item label="转化去向" prop="transformationDestination">
                    <el-select v-model="achievement.transformationDestination" placeholder="科技成果转化去向">
                        <el-option label="境内(中小微企业、国有企业)" value="境内(中小微企业、国有企业)"></el-option>
                        <el-option label="境内(中小微企业、其他企业)" value="境内(中小微企业、其他企业)"></el-option>
                        <el-option label="境内(大型企业、国有企业)" value="境内(大型企业、国有企业)"></el-option>
                        <el-option label="境内(大型企业、其他企业)" value="境内(大型企业、其他企业)"></el-option>
                        <el-option label="境内(非企业单位)" value="境内(非企业单位)"></el-option>
                        <el-option label="境外" value="境外"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="转化至单位名称（选填）">
                    <el-input v-model="achievement.companyName" placeholder="请输入转化至单位名称（选填）"></el-input>
                </el-form-item>


                <el-form-item label="转化至所在地">
                    <el-input v-model="achievement.convertLocation" placeholder="请输入转化至所在地"></el-input>
                </el-form-item>

                <el-form-item label="成果应用行业领域" prop="applicationIndustry">
                    <el-select v-model="achievement.applicationIndustry" placeholder="国民经济行业门类">
                        <el-option label="农、林、牧、渔业(A)" value="农、林、牧、渔业(A)"></el-option>
                        <el-option label="采矿业(B)" value="采矿业(B)"></el-option>
                        <el-option label="制造业(C)" value="制造业(C)"></el-option>
                        <el-option label="电力、热力、燃气及水生产和供应业(D)" value="电力、热力、燃气及水生产和供应业(D)"></el-option>
                        <el-option label="建筑业(E)" value="建筑业(E)"></el-option>
                        <el-option label="批发和零售业(F)" value="批发和零售业(F)"></el-option>
                        <el-option label="交通运输、仓储和邮政业(G)" value="交通运输、仓储和邮政业(G)"></el-option>
                        <el-option label="住宿和餐饮业(H)" value="住宿和餐饮业(H)"></el-option>
                        <el-option label="信息传输、软件和信息技术服务业(I)" value="信息传输、软件和信息技术服务业(I)"></el-option>
                        <el-option label="金融业(J)" value="金融业(J)"></el-option>
                        <el-option label="房地产业(K)" value="房地产业(K)"></el-option>
                        <el-option label="租赁和商务服务业(L)" value="租赁和商务服务业(L)"></el-option>
                        <el-option label="科学研究和技术服务业(M)" value="科学研究和技术服务业(M)"></el-option>
                        <el-option label="水利、环境和公共设施管理业(N)" value="水利、环境和公共设施管理业(N)"></el-option>
                        <el-option label="居民服务、修理和其他服务业(O)" value="居民服务、修理和其他服务业(O)"></el-option>
                        <el-option label="教育(P)" value="教育(P)"></el-option>
                        <el-option label="卫生和社会工作(Q)" value="卫生和社会工作(Q)"></el-option>
                        <el-option label="文化、体育和娱乐业(R)" value="文化、体育和娱乐业(R)"></el-option>
                        <el-option label="公共管理、社会保障和社会组织(S)" value="公共管理、社会保障和社会组织(S)"></el-option>
                        <el-option label="国际组织(T)" value="国际组织(T)"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="受中央财政资助类型">
                    <el-checkbox-group v-model="governmentType">
                        <el-checkbox label="国家自然科学基金" name="governmentType"></el-checkbox>
                        <el-checkbox label="国家科技重大专项" name="governmentType"></el-checkbox>
                        <el-checkbox label="国家重点研发计划" name="governmentType"></el-checkbox>
                        <el-checkbox label="技术创新引导专项（基金）" name="governmentType"></el-checkbox>
                        <el-checkbox label="基地和人才专项" name="governmentType"></el-checkbox>
                        <el-checkbox label="其他" name="governmentType"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="合同状态" prop="contractStatus">
                    <el-radio-group v-model="achievement.contractStatus">
                        <el-radio label="进行"></el-radio>
                        <el-radio label="完成"></el-radio>
                        <el-radio label="终止"></el-radio>
                        <el-radio label="撤销"></el-radio>
                        <el-radio label="已提交材料，结题中"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="合同金额（万）">
                    <el-input-number :min="0" controls-position="right" v-model.number="achievement.contractAmount"
                        style="width: 100px"></el-input-number>
                </el-form-item>

                <el-form-item label="年度到账经费">
                    <el-table :data="annualReceived" max-height="250" style="width: 100%">
                        <el-table-column label="年份">
                            <template #default="scope">
                                <el-input-number :min="0" controls-position="right" v-model.number="scope.row.year"
                                    style="width: 100px"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="到账经费（万元）">
                            <template #default="scope">
                                <el-input-number :min="0" controls-position="right"
                                    v-model.number="scope.row.fundsReceived" style="width: 100px"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button style="color: red;" type="text" @click="deleteItem(scope.$index)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button class="mt-4" style="width: 100%" @click="onAddItem">增加一行</el-button>
                </el-form-item>

                <el-form-item label="录入人">
                    {{achievement.inputPeople}}
                </el-form-item>

                <el-form-item label="参与人员">
                    <div v-if="cheackOrDeal">
                        <el-button size="small" type="primary" @click="addAccount()">选择本单位人员</el-button>
                        <el-button size="small" @click="addStudent()">增加学生或外单位人员</el-button>
                        <span>（对参与人员的修改可能会很慢）</span>
                    </div>
                    <div style="margin-top: 10px;">
                        <el-table :data="achievement.participants" max-height="250" style="width: 100%">
                            <el-table-column label="排序">
                                <template #default="scope">
                                    <el-input-number :min="1" controls-position="right"
                                        v-model.number="scope.row.sortNumber" style="width: 100px"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名">
                                <template #default="scope">
                                    <span style="color:#67b6ff" v-if="scope.row.usersId!=null"
                                        type="text">{{scope.row.participantName}}</span>
                                    <el-input v-model="scope.row.participantName" placeholder="请输入姓名" v-else></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="工作单位">
                                <template #default="scope">
                                    <el-input v-model="scope.row.workPlace" v-if="scope.row.usersId!=null" disabled>
                                    </el-input>
                                    <el-input v-model="scope.row.workPlace" v-else></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="类别">
                                <template #default="scope">
                                    <span style="color:#67b6ff" v-if="scope.row.usersId!=null"
                                        type="text">{{scope.row.category}}</span>
                                    <el-select v-model="scope.row.category" placeholder="类别" v-else>
                                        <el-option label="老师" value="老师"></el-option>
                                        <el-option label="学生" value="学生"></el-option>
                                        <el-option label="外单位" value="外单位"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button style="color: red;" type="text" @click="deleteOne(scope.$index)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
                <el-form-item v-if="cheackOrDeal">
                    <el-button size="large" type="primary" @click="submitUpAchievement('achievement')">修改成果转化
                    </el-button>
                </el-form-item>

            </el-form>
        </el-dialog>

        <el-dialog v-model="dialogDealFile" title="附件详情" width="30%" center>
            <div style="text-align: center;">
                <el-button type="success" @click="getFile">下载附件</el-button>
                <el-divider style="border-width: 3px;"></el-divider>

                <el-upload ref="updataFile" class="upload-demo" drag action="#" :http-request="UpFile"
                    v-if="cheackOrDeal">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">
                        拖放文件 <em>修改文件</em>
                    </div>
                </el-upload>
            </div>
        </el-dialog>

        <el-dialog v-model="dialogExcel" title="导入成功转化信息" width="30%" center>
            <div style="text-align: center;">
                <el-button type="success" @click="getExcelType">下载Excel模板</el-button>
                <el-divider style="border-width: 3px;"></el-divider>

                <el-upload class="upload-demo" drag ref="uploadExcel" action="#"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    :http-request="uploadFileExcel">
                    <el-icon class="el-icon--upload">
                        <upload-filled />
                    </el-icon>
                    <div class="el-upload__text">
                        拖放文件 <em>上传文件</em>
                    </div>
                </el-upload>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import {
        ref,
        reactive,
        computed,
        watch
    } from 'vue';
    import {
        UploadFilled,
        InfoFilled
    } from '@element-plus/icons-vue'
    import request from '@/utils/request';
    import {
        ElMessage
    } from 'element-plus'
    export default {
        name: '',
        data() {
            return {
                tableData: [],
                current: 1,
                page: 10,
                firstTotal: '',
                currentPage: 1, // 用户当前页
                total: '', // 总页数
                pageSize: 10, // 每页要展示数据条数
                AccountTableData: [], // 接收后台的总数据
                accountCache: [],
                dialogAddAchievement: false,
                dialogAddAccount: false,
                dialogUpAchievement: false,
                dialogDealFile: false,
                dialogExcel: false,
                searchName: '',
                searchRoles: '',
                searchStatus: '',
                searchContractName: '',
                searchAchievementName: '',
                loadAddress: '',
                annualReceived: [],
                governmentType: [],
                cheackOrDeal: false,
                oneself: {
                    id: '',
                    sortNumber: '',
                    participantName: '',
                    // participationMode: '',
                    workPlace: '',
                    category: '',
                    usersId: '',
                },
                achievement: {
                    id: '',
                    contractName: '',
                    achievementName: '',
                    transformationMode: '',
                    pricingMethod: '',
                    evaluated: '',
                    contractDate: '',
                    transformationDestination: '',
                    companyName: '',
                    convertLocation: '',
                    applicationIndustry: '',
                    governmentType: '',
                    contractStatus: '',
                    contractAmount: '',
                    annualReceived: '',
                    inputPeople: '',
                    supportingMaterial: '',
                    status: '',
                    participants: [{
                        // id: '',
                        // sortNumber: '',
                        // participantName: '',
                        // participationMode: '',
                        // workPlace: '',
                        // category: ''
                    }],
                    userId: ''
                },
                rules: {
                    contractDate: [{
                        type: 'date',
                        required: true,
                        message: '请选择合同签订时间',
                        trigger: 'change',
                    }, ],
                    transformationMode: {
                        required: true,
                        message: '请选择转化方式',
                        trigger: 'change',
                    },
                    contractName: {
                        required: true,
                        message: '请输入合同名称',
                        trigger: 'blur',
                    },
                    achievementName: {
                        required: true,
                        message: '请输入对应成果名称',
                        trigger: 'blur',
                    },
                    pricingMethod: {
                        required: true,
                        message: '请选择定价方式',
                        trigger: 'change',
                    },
                    transformationDestination: {
                        required: true,
                        message: '请选择转化去向',
                        trigger: 'change',
                    },
                    applicationIndustry: {
                        required: true,
                        message: '请选择成果应用行业领域',
                        trigger: 'change',
                    },
                    contractStatus: {
                        required: true,
                        message: '请选择合同状态',
                        trigger: 'change',
                    },
                }
            }
        },
        methods: {
            checkAchievement() {
                this.current = 1;
                this.load()
            },
            load() {
                request({
                    url: '/achievementTransformation',
                    headers: {
                        isToken: true
                    },
                    method: 'get',
                    timeout: 20000,
                    params: {
                        current: this.current,
                        page: this.page,
                        searchContractName: this.searchContractName,
                        searchAchievementName: this.searchAchievementName,
                        searchStatus: this.searchStatus
                    }
                }).then((res) => {
                    this.tableData = res.data.tableData;
                    this.firstTotal = res.data.total;
                    this.loadAddress = res.data.loadAddress;
                });
            },
            checkAdd() {
                this.achievement.id = ''
                this.achievement.contractName = ''
                this.achievement.achievementName = ''
                this.achievement.transformationMode = ''
                this.achievement.pricingMethod = ''
                this.achievement.evaluated = false
                this.achievement.contractDate = ''
                this.achievement.transformationDestination = ''
                this.achievement.companyName = ''
                this.achievement.convertLocation = ''
                this.achievement.applicationIndustry = ''
                this.achievement.governmentType = ''
                this.governmentType = []
                this.achievement.contractStatus = ''
                this.achievement.contractAmount = ''
                this.achievement.annualReceived = ''
                this.annualReceived = [];
                this.achievement.inputPeople = ''
                this.achievement.supportingMaterial = ''
                this.achievement.status = ''
                this.achievement.userId = ''
                this.achievement.participants = [];
                this.oneself = ''
                request({
                    url: '/accounts/getSimpleAccount',
                    headers: {
                        isToken: true
                    },
                    timeout: 20000,
                    method: 'get',
                    params: {}
                }).then((res) => {
                    res.data.user.sortNumber = 1;
                    this.achievement.participants.push(res.data.user);
                    this.achievement.inputPeople = res.data.user.participantName
                    this.oneself = res.data.user;
                })
                this.dialogAddAchievement = true;
            },
            checkUp(row) {
                this.achievement.id = row.id
                this.achievement.contractName = row.contractName
                this.achievement.achievementName = row.achievementName
                this.achievement.transformationMode = row.transformationMode
                this.achievement.pricingMethod = row.pricingMethod
                this.achievement.evaluated = row.evaluated
                this.achievement.contractDate = row.contractDate
                this.achievement.transformationDestination = row.transformationDestination
                this.achievement.companyName = row.companyName
                this.achievement.convertLocation = row.convertLocation
                this.achievement.applicationIndustry = row.applicationIndustry
                this.achievement.governmentType = row.governmentType
                if(row.governmentType!=null) this.governmentType = JSON.parse(row.governmentType)
                this.achievement.contractStatus = row.contractStatus
                this.achievement.contractAmount = row.contractAmount
                this.achievement.annualReceived = row.annualReceived
                if(row.annualReceived!=null) this.annualReceived = JSON.parse(row.annualReceived);
                this.achievement.inputPeople = row.inputPeople
                this.achievement.supportingMaterial = row.supportingMaterial
                this.achievement.status = row.status
                this.achievement.userId = row.userId
                this.achievement.participants = row.participants
                
                if (row.status == '未提交' || row.status == '审核失效') this.cheackOrDeal = true;
                else this.cheackOrDeal = false;
                this.dialogUpAchievement = true
            },
            dealFile(row) {
                this.achievement.supportingMaterial = row.supportingMaterial
                this.achievement.id = row.id
                if (row.status == '未提交' || row.status == '审核失效') this.cheackOrDeal = true;
                else this.cheackOrDeal = false;
                this.dialogDealFile = true;
            },
            deleteFile(row) {
                this.achievement.id = row.id
                this.achievement.contractName = row.contractName
                this.achievement.achievementName = row.achievementName
                this.achievement.transformationMode = row.transformationMode
                this.achievement.pricingMethod = row.pricingMethod
                this.achievement.evaluated = row.evaluated
                this.achievement.contractDate = row.contractDate
                this.achievement.transformationDestination = row.transformationDestination
                this.achievement.companyName = row.companyName
                this.achievement.convertLocation = row.convertLocation
                this.achievement.applicationIndustry = row.applicationIndustry
                this.achievement.governmentType = row.governmentType
                this.achievement.contractStatus = row.contractStatus
                this.achievement.contractAmount = row.contractAmount
                this.achievement.annualReceived = row.annualReceived
                this.achievement.inputPeople = row.inputPeople
                this.achievement.supportingMaterial = row.supportingMaterial
                this.achievement.status = row.status
                this.achievement.userId = row.userId
                this.achievement.participants = row.participants
                request({
                    url: '/achievementTransformation',
                    headers: {
                        isToken: false
                    },
                    method: 'delete',
                    timeout: 20000,
                    data: this.achievement,
                }).then(() => {
                    this.load()
                    ElMessage({
                        showClose: true,
                        message: '删除成功',
                        center: true,
                        type: 'success'
                    })
                })
            },
            onAddItem() {
                this.annualReceived.push({
                    year: 0,
                    fundsReceived: 0,
                })
            },
            deleteItem(index) {
                this.annualReceived.splice(index, 1);
            },
            addAccount() {
                this.currentPage = 1;
                this.pageSize = 10;
                this.total = '';
                this.accountLoad();
                this.dialogAddAccount = true;
            },
            accountLoad() {
                request({
                    url: '/accounts/getAllSimpleAccount',
                    headers: {
                        isToken: false
                    },
                    timeout: 20000,
                    method: 'get',
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                        searchName: this.searchName,
                        searchRoles: this.searchRoles
                    }
                }).then((res) => {
                    this.total = res.data.total;
                    this.AccountTableData = res.data.account;
                })
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.accountLoad();
            },
            checkRoles() {
                this.currentPage = 1;
                this.accountLoad();
            },
            handleSelectionChange(selection) {
                this.accountCache = selection
                // console.log(this.accountCache)
            },
            textRowClick(row) {
                this.$refs.multipleTableRef.toggleRowSelection(row);
            },
            addListparticipants() {
                for (let i = 0; i < this.accountCache.length; i++) {
                    if (this.checkRepeatName(this.accountCache[i])) {
                        this.accountCache[i].sortNumber = this.achievement.participants.length + 1;
                        this.achievement.participants.push(this.accountCache[i]);
                    }
                }
                this.dialogAddAccount = false;
            },
            //vue2语法的this就能用 我这个版本的vue3有可能有问题。。。
            uploadFile(params) {
                const formData = new FormData();
                formData.append("file", params.file);
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        isToken: false
                    }
                };
                request.post('/achievementTransformation/fileCache', formData, config).then((res) => {
                    this.achievement.supportingMaterial = res.data.saveName;
                    ElMessage({
                        showClose: true,
                        message: '上传成功',
                        center: true,
                        type: 'success'
                    })
                });
            },
            checkRepeatName(object) {
                for (let i = 0; i < this.achievement.participants.length; i++) {
                    if (this.achievement.participants[i].usersId == object.usersId) {
                        ElMessage({
                            showClose: true,
                            message: object.participantName + '已在人员列表中',
                            center: true,
                            type: 'warning'
                        })
                        return false;
                    }
                }
                return true;
            },
            addOneSelf() {
                if (this.checkRepeatName(this.oneself)) {
                    this.oneself.sortNumber = this.achievement.participants.length + 1
                    this.achievement.participants.push(this.oneself);
                }
            },
            deleteOne(index) {
                //通过下标删除距离一个位置的内容
                this.achievement.participants.splice(index, 1);
            },
            addStudent() {
                this.achievement.participants.push({
                    id: '',
                    sortNumber: this.achievement.participants.length + 1,
                    participantName: '',
                    // participationMode: '',
                    workPlace: '',
                    category: ''
                });
            },
            submitAddAchievement(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.achievement.participants.length ==0){
                            ElMessage({
                                showClose: true,
                                message: '请添加参与人员，不然无法添加数据',
                                center: true,
                                type: 'error'
                            })
                        }else{
                        this.achievement.annualReceived = JSON.stringify(this.annualReceived);
                        this.achievement.governmentType = JSON.stringify(this.governmentType);
                        request({
                            url: '/achievementTransformation',
                            headers: {
                                isToken: true
                            },
                            method: 'post',
                            timeout: 20000,
                            data: this.achievement
                        }).then(() => {
                            this.load();
                            this.dialogAddAchievement = false
                            this.$refs['upload'].clearFiles('ready')
                            ElMessage({
                                showClose: true,
                                message: '添加成功',
                                center: true,
                                type: 'success'
                            })
                        });
                        }
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            submitUpAchievement(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.achievement.participants.length ==0){
                            ElMessage({
                                showClose: true,
                                message: '请添加参与人员，不然无法添加数据',
                                center: true,
                                type: 'error'
                            })
                        }else{
                        this.achievement.annualReceived = JSON.stringify(this.annualReceived);
                        this.achievement.governmentType = JSON.stringify(this.governmentType);
                        request({
                            url: '/achievementTransformation',
                            headers: {
                                isToken: false
                            },
                            method: 'put',
                            timeout: 20000,
                            data: this.achievement
                        }).then(() => {
                            this.dialogUpAchievement = false;
                            this.load();
                            ElMessage({
                                showClose: true,
                                message: '修改成功',
                                center: true,
                                type: 'success'
                            })
                        });
                        }
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                });
            },
            getFile() {
                request({
                    url: this.loadAddress + "/" + this.achievement.supportingMaterial + "?time=" + new Date()
                        .getTime(),
                    headers: {
                        isToken: false
                    },
                    method: 'get',
                    timeout: 20000,
                    responseType: 'blob',
                }).then((res) => {
                    ElMessage({
                        showClose: true,
                        message: '请稍等正在下载附件',
                        center: true,
                        type: 'success'
                    })
                    let blob = new Blob([res.data])
                    let fileName = this.achievement.supportingMaterial
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName)
                    } else {
                        // console.log(3)
                        var link = document.createElement('a')
                        link.href = window.URL.createObjectURL(blob)
                        link.download = fileName
                        link.click()
                        //释放内存
                        window.URL.revokeObjectURL(link.href)
                    }
                }).catch(() => {
                    ElMessage({
                        showClose: true,
                        message: '没有附件',
                        center: true,
                        type: 'error'
                    })
                });
            },
            UpFile(params) {
                const formData = new FormData();
                formData.append("file", params.file);
                if(this.achievement.supportingMaterial!=null) formData.append("fileName", this.achievement.supportingMaterial);
                formData.append("id", this.achievement.id);
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        isToken: false
                    }
                };
                request.post('/achievementTransformation/upFile', formData, config).then((res) => {
                    this.$refs['updataFile'].clearFiles('ready');
                    this.load();
                    ElMessage({
                        showClose: true,
                        message: '上传成功',
                        center: true,
                        type: 'success'
                    })
                    this.dialogDealFile = false;
                });
            },
            dealStatus(row,name) {
                request({
                    url: '/achievementTransformation/status',
                    headers: {
                        isToken: false
                    },
                    method: 'put',
                    timeout: 20000,
                    data: {
                        id: row.id,
                        status: name
                    }
                }).then(() => {
                    ElMessage({
                        showClose: true,
                        message: '提交成功，状态为'+name,
                        center: true,
                        type: 'success'
                    })
                    this.load();
                });
            },
            getExcelType() {
                request({
                    url: '/static/excel/achievementTransformation.xlsx?time=' + new Date().getTime(),
                    headers: {
                        isToken: false
                    },
                    method: 'get',
                    timeout: 20000,
                    responseType: 'blob',
                }).then((res) => {
                    let blob = new Blob([res.data], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    })
                    let fileName = "导入成功转化信息" + '.xlsx'
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName)
                    } else {
                        // console.log(3)
                        var link = document.createElement('a')
                        link.href = window.URL.createObjectURL(blob)
                        link.download = fileName
                        link.click()
                        //释放内存
                        window.URL.revokeObjectURL(link.href)
                    }
                });
            },
            uploadFileExcel(params) {
                const formData = new FormData();
                formData.append("file", params.file);
                const config = {
                    headers: {
                        "Content-Type": "multipart/form-data",
                        isToken: true
                    }
                };
                request.post('/achievementTransformation/addExcel', formData, config).then(() => {
                    this.$refs['uploadExcel'].clearFiles('ready');
                    this.load();
                    ElMessage({
                        showClose: true,
                        message: '添加成功，如果成功转化信息存在则不能填加，出现冲突请联系管理员',
                        center: true,
                        type: 'success'
                    })
                    this.dialogExcel = false;
                }).catch(()=>{
                     this.$refs['uploadExcel'].clearFiles('ready');
                });
            
            },
        },
        created() {
            this.load()
        },
        watch: {
            dialogAddAchievement(val) {
                if (!val) {
                    this.$refs['upload'].clearFiles('ready')
                }
            }
        },
        setup() {
            return {
                UploadFilled,
                InfoFilled
            }
        }
    }
</script>

<style scoped>

</style>
